<template>
	<u-list :height="screenHeight">
		<view>
			<view class="xinguanOrder-box">
				<u-form labelPosition="left" ref="form" :rules="rules" :model="xinguanData">
					<u-form-item label="姓名:" borderBottom prop="userInfo.name">
						<u--input placeholder="请输入姓名" border="none" v-model="xinguanData.userInfo.name"></u--input>
					</u-form-item>
					<u-form-item label="身份证:" labelWidth="60" borderBottom prop="userInfo.userId" ref="item1">
						<u--input placeholder="请输入身份证" border="none" v-model="xinguanData.userInfo.userId"></u--input>
					</u-form-item>
					<u-form-item label="手机号:" labelWidth="60" borderBottom prop="userInfo.phone">
						<u--input placeholder="请输入手机号" border="none" v-model="xinguanData.userInfo.phone"></u--input>
					</u-form-item>
					<u-form-item label="居住地址:" labelWidth="70" borderBottom @click="addressShow = true">
						<u--input disabled disabledColor="#ffffff" v-model="xinguanData.userInfo.address" placeholder="请选择现居住地址" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="现居住详细地址:" labelWidth="120" borderBottom prop="userInfo.detailAddress">
						<u--input placeholder="请输入详细地址" border="none" v-model="xinguanData.userInfo.detailAddress"></u--input>
					</u-form-item>
					<u-form-item label="疫苗人群分类:" labelWidth="auto" borderBottom @click="vaccineShow = true">
						<u--input disabled disabledColor="#ffffff" v-model="xinguanData.userInfo.vaccineList" placeholder="请选择疫苗人群分类" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
			</view>
			<view class="buttom-box">
				<view class="hospital-box">
					<text class="hos-title">河南省第一医院</text>
					<br />
					<text class="hos-address">黄河大道门口</text>
					<view class="tag-box"><u-tag :text="item" plain v-for="(item, index) in hospitalVaccine" :key="index"></u-tag></view>
				</view>
				<view class="week-box">
					<u-scroll-list>
						<view class="week-view">
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
								<text>有号</text>
							</view>
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
								<text>有号</text>
							</view>
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
								<text>有号</text>
							</view>
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
								<text>有号</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="morning-box">
					<view class="title">上午时段</view>
					<u-scroll-list>
						<view class="week-view">
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
							</view>
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="afternoon-box">
					<view class="title">下午时段</view>
					<u-scroll-list>
						<view class="week-view">
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
							</view>
							<view class="week-item">
								<text>周三</text>
								<text>10-30</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<!-- 底部按钮 -->
				<view class="sub-box">
					<view class="sub-btn"><u-button type="primary"  @click="cancelBtn" color="#9eceff" text="取消"></u-button></view>
					<view class="sub-btn"><u-button type="primary" @click="goAddPatient" text="确认添加"></u-button></view>
				</view>
			</view>

			<!-- 居住地址弹框 -->
			<u-picker
				:show="addressShow"
				ref="uPicker"
				closeOnClickOverlay
				@close="addressClose"
				:columns="columns"
				@cancel="addressCancel"
				@confirm="addressConfirm"
				@change="addressChangeHandler"
			></u-picker>
			<!-- 疫苗人群分类弹框 -->
			<u-picker :show="vaccineShow" :columns="vaccineColumns" closeOnClickOverlay @close="vaccineClose" @cancel="vaccineCancel" @confirm="vaccineConfirm"></u-picker>
		</view>
	</u-list>
</template>
<script>
import { getxinguanMakeDateApi } from '../../../utils/api.js';
export default {
	data() {
		return {
			// 页面高度
			screenHeight: 0,
			// 表单的值
			xinguanData: {
				userInfo: {
					name: '',
					userId: '',
					phone: '',
					address: '',
					detailAddress: '',
					vaccineList: ''
				}
			},
			addressShow: false,
			vaccineShow: false,
			vaccineColumns: [['中国', '美国', '日本']],
			columns: [['中国', '美国'], ['深圳', '厦门', '上海', '拉萨']],
			columnData: [['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加']],
			// 校验规则
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.userId': {
					type: 'string',
					min: 18,
					max: 18,
					required: true,
					message: '请填写正确的身份证号码',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': {
					type: 'string',
					min: 11,
					max: 11,
					required: true,
					message: '请填写正确的手机号码',
					trigger: ['blur', 'change']
				},
				'userInfo.detailAddress': {
					type: 'string',
					required: true,
					message: '请填写详细的地址信息',
					trigger: ['blur', 'change']
				}
			},
			// 医院数据
			hospitalName: '',
			hospitalAddress: '',
			hospitalVaccine: [],
			// 时间段
			TimePeriod: [],
			weekData: []
		};
	},
	methods: {
		//获取预约时段数据
		async getTimeData() {
			const res = await getxinguanMakeDateApi();
			// console.log(res)
			this.hospitalName = res.data[0].Hospital;
			this.hospitalAddress = res.data[0].address;
			this.hospitalVaccine = res.data[0].company;
			this.TimePeriod = res.data[0].lasting;
			this.weekData = res.data[0].week;
		},
		addressChangeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		// 回调参数为包含columnIndex、value、values
		addressConfirm(e) {
			console.log('confirm', e);
			this.xinguanData.userInfo.address = e.value.join('-');
			this.addressShow = false;
		},
		addressCancel() {
			this.addressShow = false;
		},
		addressClose() {
			this.addressShow = false;
		},
		// 疫苗人群分类
		vaccineConfirm(e) {
			console.log('疫苗人群分类', e);
			this.xinguanData.userInfo.vaccineList = e.value[0];
			this.vaccineShow = false;
		},
		vaccineCancel() {
			this.vaccineShow = false;
		},
		vaccineClose() {
			this.vaccineShow = false;
		},
		// 提交表单数据
		submitData() {
			this.$refs.form
				.validate()
				.then(res => {
					uni.$u.toast('校验通过');
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		},
		// 取消按钮
		cancelBtn() {
			uni.navigateBack({ delta: 1 });
		}
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 60; //获取当前页面的高度
	},
	created() {
		this.getTimeData();
	}
};
</script>
<style lang="less">
.xinguanOrder-box {
	padding: 10rpx;
	.u-form-item {
		margin: 14rpx 0;
	}
}
.buttom-box {
	background-color: #f9f9f9;
	padding: 16rpx;
	.hospital-box {
		display: flex;
		padding: 30rpx;
		justify-content: space-around;
		flex-flow: column;
		border-radius: 10rpx;
		height: 200rpx;
		background-color: #ffffff;
		.hos-title {
			font-weight: bold;
		}
		.hos-address {
			font-size: 28rpx;
		}
		.tag-box {
			margin-top: 10rpx;
			display: flex;
			.u-transition {
				margin-right: 20rpx;
			}
		}
	}
	.week-box {
		border-radius: 10rpx;
		background-color: #ffffff;
		height: 210rpx;
		margin-top: 16rpx;
		padding: 10rpx;
		.week-view {
			display: flex;
			.week-item {
				margin-right: 10rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				width: 190rpx;
				height: 170rpx;
				background-color: #e6e6e6;
			}
		}
	}
	.morning-box {
		.title {
			margin: 10rpx 0 10rpx 15rpx;
		}
		border-radius: 10rpx;
		background-color: #ffffff;
		height: 240rpx;
		margin-top: 16rpx;
		padding: 10rpx;
		.week-view {
			display: flex;
			.week-item {
				margin-right: 10rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				width: 210rpx;
				height: 130rpx;
				background-color: #e6e6e6;
			}
		}
	}
	.afternoon-box {
		margin-bottom: 30rpx;
		.title {
			margin: 10rpx 0 10rpx 15rpx;
		}
		border-radius: 10rpx;
		background-color: #ffffff;
		height: 240rpx;
		margin-top: 16rpx;
		padding: 10rpx;
		.week-view {
			display: flex;
			.week-item {
				margin-right: 10rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				width: 210rpx;
				height: 130rpx;
				background-color: #e6e6e6;
			}
		}
	}

	// 底部按钮
	.sub-box {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx #f5f5f5 solid;
		padding: 0 26rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.sub-btn {
			width: 44%;
		}
	}
}
</style>
